<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-job="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>学生管理</el-breadcrumb-item>
            <el-breadcrumb-item>学生就业</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <!-- 搜索 添加 -->
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getJobList">
                        <el-button type="success" slot="append" icon="el-icon-search" @click="getJobList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="13">
                    <el-button type="primary" @click="showAddJobDialog" style="float:right">添加就业</el-button>
                </el-col>
            </el-row>
            <el-table :data="jobList" border stripe :header-cell-style="table_header" empty-text="暂无数据">
                <!-- 索引列 -->
                <el-table-column type="index" label="序号" width="50px" align="center"></el-table-column>
                <el-table-column label="学号" prop="stu_id" align="center" width="120px"></el-table-column>
                <el-table-column label="姓名" prop="student.name" align="center" width="80px"></el-table-column>
                <el-table-column label="工作省份" prop="work_province" align="center" width="100px"></el-table-column>
                <el-table-column label="工作单位" prop="work_unit" align="center" width="100px"></el-table-column>
                <el-table-column label="职位类别" prop="position" align="center" width="120px"></el-table-column>
                <el-table-column label="行业类别" prop="industy_type" align="center" width="110px"></el-table-column>
                <el-table-column label="就业形式" prop="work_state" align="center" width="100px"></el-table-column>
                <el-table-column label="起始薪资" prop="start_salary" align="center" width="100px"></el-table-column>
                <el-table-column label="操作" align="center" width="110px">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="编辑就业" :enterable="false" placement="top">
                            <el-button type="primary" icon="el-icon-edit" size="mini" circle @click="showEditJobDialog(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除就业" :enterable="false" placement="top">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="removeJobById(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页区域 -->
        <div job="pager-box">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageNum"
                    :page-sizes="[2, 5, 10, 15]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    prev-text="上一页"
                    next-text="下一页"
                    :total="total"
                    background
                    hide-on-single-page
            ></el-pagination>
        </div>

        <!-- 编辑就业对话框 -->
        <el-dialog :close-on-click-modal="false" :title="Dialog_title" :visible.sync="JobDialogVisible" width="60%" @close="resetForm('JobFormRef')">
            <el-form
                    :model="JobForm"
                    ref="JobFormRef"
                    :rules="JobFormRules"
                    label-width="100px"
                    :inline="true"
            >
                <el-form-item label="学号" prop="stu_id">
                    <el-select v-model.number="JobForm.stu_id" filterable placeholder="请选择">
                        <el-option
                                v-for="item in stu_id_list"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工作省份" prop="work_province" align="center" width="100px">
                    <el-input v-model="JobForm.work_province"></el-input>
                </el-form-item>
                <el-form-item label="工作单位" prop="work_unit" align="center" width="100px">
                    <el-input v-model="JobForm.work_unit"></el-input>
                </el-form-item>
                <el-form-item label="职位类别" prop="position" align="center" width="120px">
                    <el-input v-model="JobForm.position"></el-input>
                </el-form-item>
                <el-form-item label="行业类别" prop="industy_type" align="center" width="110px">
                    <el-input v-model="JobForm.industy_type"></el-input>
                </el-form-item>
                <el-form-item label="就业形式" prop="work_state" align="center" width="100px">
                    <el-input v-model="JobForm.work_state"></el-input>
                </el-form-item>
                <el-form-item label="起始薪资" prop="start_salary" align="center" width="100px">
                    <el-input type="number" v-model.number="JobForm.start_salary"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="JobDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="AddOrUpdateJob">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                queryInfo: {
                    query: '',
                    // 当前页数
                    pageNum: 1,
                    // 每页显示多少数据
                    pageSize: 10,
                },
                total: 0,
                // 所有就业列表
                jobList: [],
                stu_id_list: [],

                Dialog_state: "",
                Dialog_title: "",

                JobDialogVisible: false,
                JobForm: {},
                JobFormRules: {
                    stu_id: [
                        { required: true, message: '请输入学号', trigger: 'blur' }
                    ],
                },
            }
        },
        created () {
            this.getJobList();
            this.getStuIDList();
        },
        methods: {
            table_header(row, column, rowIndex, columnIndex){
                return 'background-color: rgb(102,177,255);color: white;font-size:14px;'
            },
            // 监听 pagesize改变的事件
            handleSizeChange (newSize) {
                // console.log(newSize)
                this.queryInfo.pageSize = newSize
                this.getJobList()
            },
            // 监听 页码值 改变事件
            handleCurrentChange (newSize) {
                // console.log(newSize)
                this.queryInfo.pageNum = newSize
                this.getJobList()
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.JobForm = {};
            },
            async getJobList() {
                const { data: res, status: status } = await this.axios.get('jobs/getJobList', {params: this.queryInfo});
                if (status !== 200) {
                    return this.$message.error('获取就业列表失败！')
                }
                this.jobList = res.data.jobs;
                this.total = res.data.total;
            },
            async getStuIDList() {
                const {data: res, status: status} = await this.axios.get('student/getStuIDList');
                if (status !== 200) {
                    return this.$message.error('获取学生列表失败！')
                }
                this.stu_id_list = res.data;
            },
            showAddJobDialog(){
                this.Dialog_state = "add";
                this.Dialog_title = "添加就业";
                this.JobDialogVisible = true
            },
            // 编辑就业
            async showEditJobDialog (Job) {
                this.Dialog_state = 'edit';
                this.Dialog_title = "编辑就业";
                this.JobForm = Job;
                this.JobDialogVisible = true
            },
            // 添加就业A
            AddOrUpdateJob () {
                var job_form = JSON.parse(JSON.stringify(this.JobForm));
                job_form.student = {};
                if (this.Dialog_state === "add") {
                    this.$refs.JobFormRef.validate(async valid => {
                        if (!valid) return
                        const {data: res, status: status} = await this.axios.post('jobs/addJob', job_form);
                        if (status !== 201) {
                            this.$message.error('添加就业失败！')
                        }
                        this.$message.success('添加就业成功！');
                        this.getJobList();
                    })
                }else {
                    this.$refs.JobFormRef.validate(async valid => {
                        if (!valid) return
                        const { data: res, status: status } = await this.axios.put('jobs/updateJob', job_form);
                        if (status !== 200) {
                            this.$message.error('更新就业信息失败！')
                        }
                        this.$message.success('更新就业信息成功！');
                        this.getJobList();
                    })
                }
                this.JobDialogVisible = false
            },
            // 删除就业
            async removeJobById (Job) {
                const confirmResult = await this.$confirm(
                    '此操作将永久删除就业 ' + Job.name +  ',  是否继续?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).catch(err => err);
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                const { data: res, status: status } = await this.axios.delete('jobs/deleteJob', {params: {"id": Job.id}});
                if (status !== 200) return this.$message.error('删除就业失败！')
                this.$message.success('删除就业成功！')
                this.getJobList();
            },

        }
    }
</script>
<style lang="less" scoped>

</style>